<script lang="ts" setup>
import { ElButton, ElTableColumn, FormRules, ElTable, ElDialog, FormInstance, ElForm, ElFormItem, ElInput, UploadProps, UploadFile, TabsPaneContext, ElMessage, ElImage } from "element-plus"
import Header from "@/views/content/util/header.vue"
import { onMounted, ref, reactive,defineEmits, defineProps } from "vue"
// import {getStaffGroupNameListApi} from '@/apis/staffApi'
import {getFunctionNamesTreeApi} from '@/apis/functionTreeApi'
import { staff } from '@/pojo/dto/staff'
import { res } from '@/pojo/dto/res'


import SButton from "@/views/content/util/button/sButton.vue"
import AuthTree from '@/views/content/components/staff/authTree.vue'
const props = defineProps({
    groupId: {
        type: Number,
        default: () => null
    },
    title: {
        type: String,
        default: () => null
    }
})
//员工编辑
const editGroup = ref({
    sort: 1,
    id: 0,
    name: '',
    role:'',
    status: 0
})
const showPop = ref(true)
const ruleFormRef = ref<FormInstance>()
//校验规则
const rules = reactive<FormRules>({
    name: [
        { required: true, message: "请输入角色名称", trigger: "blur" },
        { min: 1, max: 30, message: "角色名称长度不得超过30", trigger: "blur" },
    ],
    
    role: [
        {
            required: true,
            message: "请设置权限",
            trigger: "change",
        },
    ],
   
})

//--------------------------------------------------------------------------------------员工编辑----------------------------------------------------------------------------------------
// onBeforeMount(() => {
//     if(props.staffId){
//         getEcho(props.staffId)
//     }
// })

const getEcho = async (echoStaffId: Number) => {
    const res: res = await getFunctionNamesTreeApi()
    if (res.code === 0) {
       
        
    }
    else {
        ElMessage({ type: 'error', message: res.message })
    }
}
//置空
const doEmpt = () => {
   
}

//关闭事件
const emit = defineEmits(["exitEditPage"]);
function goBack() {
    emit("exitEditPage");
}

const submitFormEdit = async (formEl: FormInstance | undefined) => {
    // console.log(editStaff);
    console.log('提交编辑表单');
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
        if (valid) {
        } else {
            ElMessage({ type: "error", message: "请正确填写必要信息！" });
        }

    })
}

const submitFormAdd = async (formEl: FormInstance | undefined) => {
    // console.log(editStaff);
    console.log('提交添加表单');
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
        if (valid) {
        } else {
            ElMessage({ type: "error", message: "请正确填写必要信息！" });
        }

    })
}
//--------------------------------------------------------------------------------添加员工-----------------------------------------------------------------------------------------
const staffGroupNames = ref([])
onMounted(async() => {
    if (props.groupId) {
        //回显函数
        getEcho(props.groupId)
    }

    
})
</script>
<template>
    <div>
        <el-dialog :model="true" v-model="showPop" :title="props.title" :before-close="() => { goBack() }" draggable
            :show-close="true" style="border-radius: 10px;">
            <el-form ref="ruleFormRef" :model="editGroup" :rules="rules" label-width="100px">
               
                        <el-form-item :label="'排序'" prop="sort">
                            <el-input-number v-model="editGroup.sort" style="width: 200px;" min
                                precision="0"></el-input-number>
                        </el-form-item>
                        <el-form-item :label="'角色名称'" prop="name">
                            <el-input v-model="editGroup.name" style="width: 300px;"></el-input>
                        </el-form-item>
                        <el-form-item :label="'权限'" prop="phone">
                            <AuthTree></AuthTree>
                        </el-form-item>
                       
            </el-form>
            <span style="position: relative;top: 10px;left: 80%;">
                <SButton @click="goBack()" title="取消" type="cancel"/>
                <SButton type="save" title="保存"
                    @click="props.groupId ? submitFormEdit(ruleFormRef) : submitFormAdd(ruleFormRef)"/>
            </span>
        </el-dialog>
    </div>
</template>
<style lang="scss" scoped></style>